<template>
  <div class="quotation-info">
    <div class="steps">
      <el-steps :active="1" finish-status="success" simple>
        <el-step title="询报价信息" />
        <el-step title="定标信息" />
      </el-steps>
    </div>
    <!-- 供应商信息 -->
    <SupplierInfo :selfPurchaseBillId="selfPurchaseBillId" :isReadOnly="isReadOnly" />
    <!-- 基本信息 -->
    <BaseInfo :selfPurchaseBillId="selfPurchaseBillId" :isReadOnly="isReadOnly" />
    <!-- 商品信息 -->
    <Goods :selfPurchaseBillId="selfPurchaseBillId" :isReadOnly="isReadOnly" />
    <el-row class="footer-btn" v-if="isReadOnly" type="flex" justify="center">
      <el-button size="mini" type="primary" @click="handleBackHome">返回</el-button>
      <el-button size="mini" type="primary" @click="toCalibrationView">下一步</el-button>
    </el-row>
  </div>
</template>

<script>
import SupplierInfo from './SupplierInfo'
import BaseInfo from './BaseInfo'
import Goods from './Goods'

export default {
  // 自进货报价信息
  components: {
    BaseInfo,
    Goods,
    SupplierInfo,
  },
  data () {
    return {}
  },
  computed: {
    selfPurchaseBillId () {
      return this.$route.query.selfPurchaseBillId
    },
    isReadOnly () {
      return this.$route.query.isReadOnly
    }
  },
  methods: {
    handleBackHome () {
      this.$router.push({ name: 'selfPurchase' })
    },
    toCalibrationView () {
      this.$router.push({ name: 'selfPurchaseCalibrationView', query: { selfPurchaseBillId: this.selfPurchaseBillId } })
    },
  }
};
</script>
<style lang="less">
.quotation-info {
  background: #fff;
  .footer-btn {
    padding: 10px 0;
  }
}
</style>
